import React, {useState} from 'react';
import styled from 'styled-components';

interface TypeProps {
    readonly selectedType: 'outcome' | 'income'
}

const StyledType = styled.div<TypeProps>`
    > ul {
        display: flex;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        position: relative;
        &::after {
            content: '';
            position: absolute;
            width: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #FD9A16;
            left: ${(props) => (props.selectedType === 'outcome' ? '25%' : '75%')};
            bottom: 0;
            margin-left: -10px;
            transition: all 0.35s ease;
        }
        > li {
            font-size: 1.5em;
            padding: 5px 0;
            width: 50%;
            line-height: 2em;
            text-align: center;
            color: #BDBDBD;
            &.selected {
                color: #FD9A16;
            }
        }
    }
`;

type Props = {
    selectedType: 'outcome' | 'income'
    onTypeChange: Function
}

const Type:React.FC<Props> = (props) => {

    const typeMap = {'outcome': '支出', 'income': '收入'};
    const [typeList] = useState<(keyof typeof typeMap)[]>(['outcome', 'income']);

    return (
        <StyledType selectedType={props.selectedType}>
            <ul>
                {typeList.map(type =>
                    <li
                        className={props.selectedType === type ? 'selected' : ''}
                        key={type}
                        onClick={() => props.onTypeChange(type)}>
                        {typeMap[type]}
                    </li>
                )}
            </ul>
        </StyledType>
    );
};

export default Type;